<template>
  <div class="material-manage">
    <a-table
      bordered
      class="field_Log"
      :expandIcon="expandIcon"
      :columns="columns"
      :rowKey="(record) => record.KEY"
      :data-source="tableData"
      :default-expand-all-rows="true"
      :pagination="false"
      :scroll="{y:500}"
    >
      <template slot="fieldName" slot-scope="text, record">
        <svg v-if="record.title" class="m-r-sm icon-type" aria-hidden="true">
          <use xlink:href="#icon-a-3"></use>
        </svg>
        <span class="color-text" :title="record.title || record.FIELDDESC" style="display: inline-block;width: calc(100% - 110px)">
          <div class="dir-title">
            <div class="dir-title-detail" :title="record.title || record.FIELDDESC">{{ record.title || record.FIELDDESC }}</div>
            <div class="h-full flex-1"></div>
          </div>
        </span>
      </template>
      <template slot="content" slot-scope="text, record">
        <span v-if="record.CONTENT">
          {{ record.CONTENT }}
        </span>
      </template>
      <template slot="time" slot-scope="text, record">
        <span v-if="record.CREATETIME">
          {{ record.CREATETIME }}
        </span>
      </template>
      <template slot="username" slot-scope="text, record">
        <span v-if="record.USERNAME">
          {{ record.USERNAME }}
        </span>
      </template>
      <template slot="activity" slot-scope="text, record">
        <span v-if="record.ACTIVITYNAME">
          {{ record.ACTIVITYNAME }}
        </span>
      </template>
    </a-table>
  </div>
</template>

<script>
  import orupService from '@/api/orupService'
  import moment from 'moment'

  const columns = [
    {
      title: '字段名称',
      dataIndex: 'fieldName',
      key: 'fieldName',
      ellipsis: true,
      scopedSlots: { customRender: 'fieldName' }
    },
    {
      title: '修改内容',
      dataIndex: 'content',
      key: 'content',
      width: '40%',
      align: 'center',
      scopedSlots: { customRender: 'content' }
    },
    {
      title: '操作时间',
      key: 'time',
      width: '20%',
      scopedSlots: { customRender: 'time' },
      align: 'center'
    },
    {
      title: '人员',
      key: 'username',
      width: '10%',
      scopedSlots: { customRender: 'username' },
      align: 'center'
    },
    {
      title: '环节',
      key: 'activity',
      width: '10%',
      scopedSlots: { customRender: 'activity' },
      align: 'center'
    }
  ]

  export default {
    name: 'FieldLogTable',

    data () {
      return {
        columns,
        inRender: false,
        materialTree: [],
        params: this.$route.params,
        showOpenFolder: false,
        customHandle: {},
        query: this.$route.query,
        projectId: this.$route.params.id,
        taskId: this.$route.query.taskId,
        isEdit: this.$route.params.isEdit,
        activityName: '',
        projectInfo: {},
        useInfo: '',
        uploadVisible: false,
        uploadRecord: '',
        fileType: ''
      }
    },
    components: {
    },
    created () {
    },
    mounted () {
      this.getCurrentUser()
    },
    props: {
      tableData: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    methods: {
      // 获取用户id
      async getCurrentUser () {
        const res = await orupService.getCurrentUser()
        this.useInfo = res.id
      },
      moment (time) {
        return moment(time).format('YYYY-MM-DD HH:mm:ss')
      },
      expandIcon (props) {
        if (props.record.title) {
          if (props.expanded) {
            props.record.showOpenFolder = true
            return (
              <a-icon
            type="caret-down"
          class="m-r-xs f18"
            style="color:#9C9C9C;"
            onClick={(e) => {
              props.record.showOpenFolder = !props.record.showOpenFolder
              props.onExpand(props.record, e)
            }}
            />
          )
          } else {
            props.record.showOpenFolder = false
            return (
              <a-icon
            type="caret-right"
          class="m-r-xs f18"
            style="color:#9C9C9C;"
            onClick={(e) => {
              props.record.showOpenFolder = !props.record.showOpenFolder
              props.onExpand(props.record, e)
            }}
            />
          )
          }
        } else {
          return (
            // <i class="icon iconfont icon-a-ziyuan2 f18 m-r-xs"/>
            <i class="iconfont icon-a-ziyuan2 f18 m-r-xs"></i>
          )
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .material-manage {
    background: #fff;
    padding: 10px;
    overflow: auto;

    .icon-type{
      width: 18px;
      height: 18px;
      margin-right: 5px;
    }

    /deep/ .ant-table-thead > tr > th {
      text-align: center;
    }

    /deep/ .ant-table-thead > tr > th,
    /deep/ .ant-table-tbody > tr > td {
      padding: 8px 12px;
    }

    .upload-span {
      display: inline-block;
    }
  }
  .dir-file-item{
    padding: 5px;
    .file-size{
      padding-left: 22px;
      color: #999999;
    }
    &:hover {
      background: rgba(214,217,220,0.20);
      border-radius: 2px;
      .hide{
        display: inline-block;
      }
    }
    & + .dir-file-item{
      padding-top: 10px;
    }
  }
  .hide{
    display: none;
  }
  /deep/.ant-table-tbody>tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)>td{
    background: transparent;
  }
  .color-text{
    color: #666666;
  }
  .dir-title{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    &-detail{
      max-width: 95%;
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap;  // 默认不换行；
    }
    &-required{
      margin-left: 4px;
      color: #f5222d;
      font-size: 16px;
      font-family: SimSun, sans-serif;
      line-height: 1;
    }
  }

  .text-green{
    color: #6dd400;
  }
  .text-blue{
    color: #5b99e6;
  }
  .field_Log{
   /deep/ .ant-table-hide-scrollbar{
      padding-bottom: 1px !important;
    }
  }
</style>
